<template>
  <div class="user-info-container">
    <el-form ref="form" :model="userInfo" label-width="100px" @submit.native.prevent="updateUserInfo">
      <el-form-item label="用户账户：" prop="userName">
        <el-input v-model="userInfo.userName" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户名称：" prop="nickName">
        <el-input v-model="userInfo.nickName"></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱：" prop="email">
        <el-input v-model="userInfo.email"></el-input>
      </el-form-item>
      <el-form-item label="手机号码：" prop="phonenumber">
        <el-input v-model="userInfo.phonenumber"></el-input>
      </el-form-item>
      <el-form-item label="用户性别：" prop="sex">
        <el-select v-model="userInfo.sex" placeholder="请选择">
          <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="$refs.form.validate()">修改</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      userInfo: {
        userName: '',
        nickName: '',
        email: '',
        phonenumber: '',
        sex: '',
      },
    };
  },
  methods: {
    getUserInfo() {
      request({url: '/system/user/getUserInfo', method: "GET"}).then(
          response => {
            console.log(response.data);
            if (response.data.code === 200) {
              this.userInfo = response.data.data
            } else {
              alert('获取用户信息失败');
            }
          });
    },
    updateUserInfo() {
      request({
        url: "/system/user/updateUserInfo",
        method: "POST",
        headers: { 'Content-Type': 'application/json' },
        data: this.userInfo
      }).then(result => {
        this.statusData = result.data;
        if (this.statusData.code !== 200) {
          this.$message({
            message: this.statusData.msg,
            type: 'error'
          });
        } else {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.showEvaluate = false
        }
      });
    },
    cancel() {
      window.location.reload(); // 刷新页面
    }
  },
  created() {
    this.getUserInfo();
  },
};
</script>
<style scoped>
.user-info-container {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
</style>
